<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="css/empcss.css"/>
		<link rel="stylesheet" type="text/css" href="css/compatible.css"/>
		<script type="text/javascript">
			var setData = {date_type:"date", date:"today"};
		</script>
		<style>
			#echarts{
				height: 72vh;
				min-height: 450px;
				max-width: 600px;
				margin: 0 auto;
			}
			
			#container{
				height: 30vh;
				min-height: 250px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">会员统计</h1>
		</header>
		<div class="mui-content">
		    
		
		<main id="content">
			<section class="mui-content financial-tab text-center" data-url='/api/member/trend'>
				<ul class="mui-row">
					<li class="mui-col-xs-6" onclick="tab(event, storeChange)"> <!--onclick="tab(event, paytype)"-->
						<p>门店</p>
						<div class="financial-subtab curStore" data-store="">
							<!-- <span data-name="all">全部途径</span>
							<span data-name="普通支付">普通支付</span>
							<span data-name="现金支付">现金支付</span>
							<span data-name="移动支付">移动支付</span>
							<span data-name="微信支付">微信支付</span>
							<span data-name="支付宝支付">支付宝支付</span>
							<span data-name="其它">其它</span> -->
						</div>
					</li>
					<li class="mui-col-xs-6" onclick="tab(event, changeDate)">
						<p>今日</p>
						<div class="financial-subtab">
							<span data-type="date" data-date="today">今天</span>
							<span data-type="date" data-date="yesterday">昨天</span>
							<span data-type="custom" data-date="week">本周</span>
							<span data-type="custom" data-date="month">本月</span>
							<span class="none" onclick="timeStep(event)">时间段</span>
						</div>
					</li>
				</ul>
			</section>
			
			<section class="main-title container border clear"><img src="http://placehold.it/38x38" alt="" /><span>新增会员走势分析</span><span class="pull-right">共 <b class="member_num">0</b> 个</span></section>
			<div id="analysis" style="height: 300px"></div>
			<section class="table container table-col-2 text-center profit-table"></section>

			<div id="popover" class="mui-popover">
				<div class="listdiv">
					<div class="mui-input-row borbot" >
						<label>开始时间:</label>
						<div class="place items">
							<button id='starttime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
						<div class="place items">
							<button id='endtime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
				</div>
			</div>
		</main>
		</div>
	</body>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="js/echarts.js"></script>
	<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>


	<script src="js/commont.js"></script>

	
	<script type="text/javascript">
		//mui.init()

	var analysis= document.getElementById("analysis");
	var myChart = echarts.init(analysis);
	
	function fn1(_data){
		
		var date = []
		var value = []
		
		if(_data.length > 0){
			_data.forEach(function (cur, index){
				date.push(cur['date'].substr(5))
				value.push(cur['count'])
			})
		}
		
		var option = {
			xAxis: {
		        type: 'category',
		        data: date,
				// name : '日期',
				nameLocation : 'start',
				nameTextStyle : {
					padding : [30, -20, 0, 0]
				},
				nameGap : 20,
				axisLine : {
					lineStyle : {
						color : '#5799B7'
					}
				}
		    },
		    yAxis: {
		        type: 'value',
				// name : '利润',
				axisLine : {
					lineStyle : {
						color : '#5799B7'
					}
				},
				axisLine : {
					show : false
				},
				axisTick : {
					show : false
				}
		    },
		    lineStyle : {
		    	color : '#5799B7'
		    },
			itemStyle : {
				color : '#5799B7'
			},
		    series: [{
		        data: value,
		        type: 'line',
				
		    }]
		};

		if(_data.length > 8){
			option['dataZoom'] = [{
				type: 'inside',
				show: true, //flase直接隐藏图形
				xAxisIndex: [0],
				left: '9%', //滚动条靠左侧的百分比
				bottom: -5,
				start: 0,//滚动条的起始位置
				end: 60 ,//滚动条的截止位置（按比例分割你的柱状图x轴长度）
			}]
		}

		return option
	}
	
	function requireData(_data){
		var store = $('.curStore').data('store');
		if(!!store){
			_data['data']['store_id'] = store
		}else{
			delete _data['data']['store_id']
		}
		_data['data'].access_token = acctoken()

		if(_data.data['date_type'] == 'date'){
			$('.singleday').hide()
		}else{
			$('.singleday').show()
		}

		ajax(_data, function (res){
			//console.log(data)
			var data = res.data
			setEcharts(myChart, data['member'], fn1)
			
			var html = ['<div class="table-th"><span class="table-td">时间</span><span class="table-td">会员(个)</span></div>']
			
			var count = 0;
			data['member'].forEach(function (cur, index, array){
				var tpl =
					`<div class="table-tr"><span class="table-td">${cur['date']}</span><span class="table-td">${cur['count']}</span></div>`;
				html.push(tpl);
				
				count += parseInt(cur['count']);
			})
			
			html.push(`<div class="table-th"><span class="table-td"><b>合计</b></span><span class="table-td"><b>${data.member_count_all}</b></span></div>`)
			
			$('.member_num').html(count)
			$('.table').html(html.join(''));
		})
	}
	
	requireData({
		url : '/api/member/trend',
		data : {
			date_type : 'date',
			date : 'today'
		}
	})
	

	window.addEventListener("resize", function(){
		myChart.resize();

	});
</script>
</html>
